import { Component } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'app-root',
  templateUrl:'./app.component.html',
})
export class AppComponent  {
  title = 'Tour of Herors';
  heroes = [
    new Hero(1,'windstorm'),
    new Hero(13,'Bombasto'),
    new Hero(15, 'Magneta'),
    new Hero(20,'Tornado')
    ];
  myHero = this.heroes[0];
}

@Component({
  selector: 'little-tour',
  template:`
  <input #newHero
     (keyup.enter)="addHero(newHero.value)"
     (blur)="addHero(newHero.value); newHero.value='' ">

   <button (click)="addHero(newHero.value)">Add</button>

   <ul><li *ngFor="let hero of heroes2">{{hero}}</li></ul>`
})

export class LittleTourComponent {
  color = 'yellow';
  heroes2 = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  addHero(newHero: string) {
    if (newHero) {
      this.heroes2.push(newHero);
    }
  }
}
